{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-table" id="bannerList" lay-filter="list"></table>
    </div>
</div>
{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    </div>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="编辑"><i class="fa fa-pencil-square-o"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>

<script type="text/html" id="imgTmp">
    <img src="{{d.img_url}}" width="100" height="100">
</script>

<script type="text/html" id="isDel">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isDel" {{ d.status == 1 ? 'checked' : '' }}>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['table','form'], function() {
        var table = layui.table;
        var form = layui.form;

        var bannerTableIns = table.render({
            title: '',
            elem: "#bannerList",
            method: "post",
            url: "{:url('banner/index')}",
            page: true,
            limits: [10, 25, 50, 100, 200, 300, 400, 500, 1000],
            toolbar: "#toolbar",//开启头部工具栏
            defaultToolbar:[],
            response: {
                statusCode: 'suc'
            },
            cols: [[
                // {type:'checkbox'},
                {field: 'img_url', title: '图片', align: 'center', templet: "#imgTmp"},
                {field: 'jump_url', title: '跳转链接', align: 'center'},
                {field: 'sort', title: '排序', align: 'center'},
                {field: 'status', title: '状态', align: 'center', templet: "#isDel"},
                {field: '', title: '操作', align: 'center', toolbar: '#barHandle'}
            ]],
            done:function (res, curr, count) {
                bannerCurrPage = curr
                $('.layui-table-cell').css({'height':'auto'})
            }
        });

        //头部工具栏事件
        table.on('toolbar(list)',function (obj) {
            if (obj.event == 'add') {
                xadmin.open('添加','{:url("banner/add")}')
            }
        });

        form.on('switch(isDel)',function (obj) {
            let id = obj.value
            let tip = '';
            let type = 1;
            if (obj.elem.checked == true){
                tip = '确定显示？';
            } else {
                tip = '确定隐藏？';
                type = 2;
            }
            changeStatus("{:url('banner/changeStatus')}",id,type,1,tip,bannerTableIns,'bannerList',bannerCurrPage)
        });

        // 监听工具列点击事件
        table.on('tool(list)',function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                let id = data.id
                let url = "{:url('banner/edit')}?id="+id
                xadmin.open('编辑',url)
            }else if (obj.event == 'del') {
                layer.confirm('确认删除？',{title:''},function (index) {
                    ajaxRequest("{:url('banner/del')}",{id:data.id},function (res) {
                        if (res.code == 'suc') {
                            sucMsg(res.msg)
                        } else {
                            errMsg(res.msg)
                        }
                    })
                    bannerTableIns.reload('bannerList',{page:bannerCurrPage})
                    layer.close(index);
                })
            }
        });
    });
</script>
{/block}